<template>
  <Page class="bg-[#f5f5f5] min-h-screen pb-[40rpx]">
    <!-- 头部 -->
    <PageHeader title="我的评价" :showBack="true" />

    <view class="px-[24rpx] mt-[40rpx]">

      <!-- 评价历史卡片 -->
      <view class="bg-white rounded-[24rpx] shadow-md p-[32rpx] mb-[32rpx]">
        <view class="flex items-center mb-[24rpx] pb-[16rpx] border-b border-[#f0f4ff]">
          <IconFont font-class-name="iconfont" color="#4a6bff" size="20" class-prefix="icon" name="liaotian" />
          <view class="text-[32rpx] font-bold text-[#4a6bff] ml-[12rpx]">评价历史</view>
        </view>
        <view class="text-[28rpx] font-bold text-[#999999] mb-[24rpx]">最近收到的评价</view>
        <view class="flex flex-col gap-y-[24rpx]  overflow-y-auto">
          <view v-for="(item, idx) in historyList" :key="idx" class="flex p-[24rpx] border-b border-[#eee] last:border-b-0">
            <view class="w-[64rpx] h-[64rpx] rounded-full bg-[#f0f4ff] flex items-center justify-center text-[28rpx] text-[#4a6bff] mr-[20rpx]">
              <img :src="getFullPath(item.avatar_url)" class="w-[64rpx] h-[64rpx] rounded-full" />
            </view>
            <view class="flex-1">
              <view class="flex justify-between mb-[8rpx]">
                <view class="text-[24rpx] font-bold">{{ item.name }}</view>
                <nut-rate spacing="4" v-model="item.score" class="pointer-events-none"/>
                <!-- <view class="text-[20rpx] text-[#666]">{{ item.type }}</view> -->
              </view>
              <view class="flex items-center mb-[8rpx]">
                <view class="flex text-[#ffc107] text-[22rpx] mr-[12rpx]">
                  <!-- 已评分的星星（全星） -->
<!--                  <IconFont-->
<!--                      v-for="n in (item.execute_score || 5)"-->
<!--                      :key="'star-' + n"-->
<!--                      name="star-2"-->
<!--                      color="#ffc107"-->
<!--                  />-->
<!--                  &lt;!&ndash; 未评分的星星（空星） &ndash;&gt;-->
<!--                  <IconFont-->
<!--                      v-for="n in (5-item.execute_score)"-->
<!--                      :key="'empty-' + n"-->
<!--                      name="star-empty"-->
<!--                      color="#ddd"-->
<!--                  />-->

                </view>
                <view class="text-[24rpx] font-bold" :class="item.level">{{ item.levelText }}</view>
              </view>
              <view class="text-[22rpx] text-[#555] mb-[8rpx]">{{ item.review_content }}</view>
              <view class="text-[20rpx] text-[#999] text-right">{{ item.create_time }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </Page>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue'
import { IconFont } from '@nutui/icons-vue-taro'
import { showToast } from '@tarojs/taro'
import PageHeader from '@/components/PageHeader.vue'
import {post} from "@/utils/request";
import { getFullPath } from '@/utils/request';
// 组件挂载后调用，获取初始数据
onMounted(() => {
  myRating();
});

const historyList = ref([

])

const ratingOptions = [
  { value: 'good', label: '好评', icon: 'thumbs-up', color: 'text-[#52c41a]', border: '#52c41a' },
  { value: 'medium', label: '中评', icon: 'meh', color: 'text-[#faad14]', border: '#faad14' },
  { value: 'bad', label: '差评', icon: 'thumbs-down', color: 'text-[#ff4d4f]', border: '#ff4d4f' }
]
const selectedRating = ref('')
const ratingComment = ref('')

//获取我的评价
const myRating = async () =>{
  const data = await post('/my/rating')
  historyList.value = data.data.map(item => {
    return {
      ...item.columns,
      score: Number(item.columns.execute_score),
    }
  });
  console.log("promotionList",historyList)
}

function submitRating() {
  if (!selectedRating.value) {
    showToast({ title: '请选择评价类型', icon: 'none' })
    return
  }
  showToast({ title: '评价提交成功！感谢您的反馈。', icon: 'success' })
  selectedRating.value = ''
  ratingComment.value = ''
}
</script>